<template>
	<gracePage statusBarBG="rgba(255,255,255,0)">
		<view slot="gHeader">
			<view class="grace-header-body">
				<!-- 返回按钮 -->
				<button type="primary" class="grace-button grace-header-icons grace-icons icon-arrow-left grace-white grace-noborder" plain="true" @tap="goBack"></button>
				<!-- 中间内容 -->
				<view class="grace-header-content-noflex grace-h4 grace-bold grace-white grace-text-center" style="margin-left: -60rpx;">
					用户注册
				</view>
				<!-- 设置按钮 -->
				<view class="grace-white"></view>
			</view>
		</view>
		<view slot="gBody">
			<view class="grace-body">
				<view class="help-body">
					<view class="grace-grids grace-flex-center grace-box-shadow" style="margin-top:50rpx;">
						<form @submit="formSubmit" class="grace-form" style="margin-top:10rpx;">
							<view class="grace-form-item grace-border-b" style="margin-left: 50rpx;">
								<text class="grace-icons icon-user grace-form-icon"></text>
								<view class="grace-form-body">
									<input type="text" class="grace-form-input" v-model="username" name="username" placeholder="请输入用户名"></input>
								</view>
							</view>
							<view class="grace-form-item grace-border-b" style="margin-left: 50rpx;">
								<text class="grace-icons icon-phone grace-form-icon"></text>
								<view class="grace-form-body">
									<input type="text" class="grace-form-input" v-model="mobile" name="mobile" placeholder="请输入手机号码"></input>
								</view>
							</view>
							<view class="grace-form-item grace-border-b" style="margin-left: 50rpx;">
								<text class="grace-icons icon-speaker grace-form-icon"></text>
								<view class="grace-form-body">
									<input type="number" class="grace-form-input" name="code" placeholder="请输入验证码" />
								</view>
								<view class="login-sendmsg-btn grace-red grace-border-radius " plain="true" @tap="getVCode">{{vcodeBtnName}}</view>
							</view>
							<view class="grace-form-item grace-border-b" style="margin-left: 50rpx;" @tap="open2">
								<text class="grace-icons icon-address grace-form-icon"></text>
								<view class="grace-form-body">
									<input type="text" class="grace-form-input" name="value2" :value="value2" disabled placeholder="请选择所在地" />
								</view>
								<text class="grace-icons icon-arrow-down grace-form-icon grace-text-center"></text>
							</view>
							<view class="grace-form-item grace-border-b" style="margin-left: 50rpx;">
								<text class="grace-icons icon-scan grace-form-icon"></text>
								<view class="grace-form-body">
									<input type="password" v-if="pwdType == 'password'" class="grace-form-input" name="password" v-model="password"
									 placeholder="请输入登录密码"></input>
									<input type="text" v-if="pwdType == 'text'" class="grace-form-input" name="password" v-model="password"
									 placeholder="请输入登录密码"></input>
								</view>
								<text class="grace-icons icon-eye grace-form-icon grace-text-center" :class="[pwdType == 'text' ? 'grace-blue' : '']"
								 v-if="password != ''" @tap="showPwd"></text>
							</view>
							<view class="grace-form-item grace-border-b" style="margin-left: 50rpx;">
								<text class="grace-icons icon-scan grace-form-icon"></text>
								<view class="grace-form-body">
									<input type="password" v-if="pwd2Type == 'password'" class="grace-form-input" name="password2" v-model="password2"
									 placeholder="请再次确认登录密码"></input>
									<input type="text" v-if="pwd2Type == 'text'" class="grace-form-input" name="password2" v-model="password2"
									 placeholder="请再次确认登录密码"></input>
								</view>
								<text class="grace-icons icon-eye grace-form-icon grace-text-center" :class="[pwd2Type == 'text' ? 'grace-blue' : '']"
								 v-if="password2 != ''" @tap="showPwd2"></text>
							</view>
							<view class="grace-margin-top" style="margin-top: 50rpx;">
								<button form-type="submit" type="primary" class="grace-button grace-border-radius grace-bg-red" style="width:70%;">
									确认注册
								</button>
							</view>
						</form>
					</view>
				</view>
			</view>
			<graceAddressPicker :show="show2" @confirm="confirm2" @close="close2" :value="default2"></graceAddressPicker>
		</view>
	</gracePage>
</template>
<script>
	import gracePage from "../../graceUI/components/gracePage.vue";
	import graceAddressPicker from '../../graceUI/components/graceAddressPicker.vue';
	import graceHeader from '../../graceUI/components/graceHeader.vue';
	var graceChecker = require("../../graceUI/jsTools/graceChecker.js");
	export default {
		data() {
			return {
				vcodeBtnName: "获取验证码",
				countNum: 60,
				countDownTimer: null,
				username: '',
				mobile: '',
				code: '',
				province: '',
				city: '',
				area: '',
				password: '',
				pwdType: 'password',
				password2: '',
				pwd2Type: 'password',
				show2: false,
				value2: '',
				// 第2个级联的默认值
				// ["26", "0", "5"] 代表 "陕西省", "西安市", "雁塔区"
				default2: [26, 0, 5]
			};
		},
		components: {
			gracePage,
			graceAddressPicker,
			graceHeader
		},
		methods: {
			//退回
			goBack : function(){
			    uni.navigateBack({});
			},
			clearInput: function() {
				this.username = '';
			},
			showPwd: function() {
				this.pwdType = this.pwdType == "password" ? 'text' : 'password';
			},
			showPwd2: function() {
				this.pwd2Type = this.pwd2Type == "password" ? 'text' : 'password';
			},
			pickerChange: function(e) {
				this.genderIndex = e.detail.value;
			},
			async getVCode() {
				var myreg = /^[1][1,2,3,4,5,7,8,9][0-9]{9}$/;
				
				if (!myreg.test(this.mobile)) {
					uni.showToast({
						title: '请正确填写手机号码',
						icon: "none"
					});
					return false;
				}
				// 手机号码为 :  this.phoneno
				// vcodeBtnName 可以阻止按钮被多次点击 多次发送 return 会终止函数继续运行
				if (this.vcodeBtnName != '获取验证码' && this.vcodeBtnName != '重新发送') {
					return;
				}
				this.vcodeBtnName = "发送中...";
				let event = 'register';
				let phone = this.mobile.trim();
				
				let params = {
					mobile: phone,
					event: event
				}
				// 与后端 api 交互，发送验证码 【自己写的具体业务代码】
				let data = await this.$apis.getVCode(params);
				console.log(data);
				// 假设发送成功，给用户提示
				uni.showToast({
					title: '短信已发送，请注意查收',
					icon: "none"
				});
				// 倒计时
				this.countNum = 120;
				this.countDownTimer = setInterval(function() {
					this.countDown();
				}.bind(this), 1000);
			},
			countDown: function() {
				if (this.countNum < 1) {
					clearInterval(this.countDownTimer);
					this.vcodeBtnName = "重新发送";
					return;
				}
				this.countNum--;
				this.vcodeBtnName = this.countNum + '秒重发';
			},
			// 表单提交及验证
			formSubmit: function(e) {
				//定义表单规则
				var rule = [{
						name: "username",
						checkType: "string",
						checkRule: "1,16",
						errorMsg: "姓名应为1-16个字符"
					},
					{
						name: "mobile",
						checkType: "phoneno",
						checkRule: "",
						errorMsg: "手机号码不正确"
					},
					{
						name: "value2",
						checkType: "string",
						checkRule: "1,",
						errorMsg: "请选择所在地"
					},
					{
						name: "password",
						checkType: "string",
						checkRule: "6,",
						errorMsg: "密码至少6个字符"
					},
					{
						name: "password2",
						checkType: "samewith",
						checkRule: "password",
						errorMsg: "两次密码输入不一致"
					},

				];
				//进行表单检查 e.detail.value 内存放着表单数据
				var formData = e.detail.value;
				var checkRes = graceChecker.check(formData, rule);
				if (checkRes) {
					delete formData.value2;
					delete formData.password2;
					formData.area = this.getArea();
					console.log(formData);					
					this.register(formData);

				} else {
					uni.showToast({
						title: graceChecker.error,
						icon: "none"
					});
				}
			},
			//用户注册
			async register(data) {
				let ret = await this.$apis.registerUser(data);
				uni.showToast({
					title: "注册成功!",
					icon: "none"
				});
			},
			
			open2: function() {
				this.show2 = true;
			},
			confirm2: function(e) {
				// 返回选中城市的编号及文本信息
				console.log(e);
				this.province = e.codes[0];
				this.city = e.codes[1];
				this.area = e.codes[2];
				this.value2 = e.names[0] + ',' + e.names[1] + ',' + e.names[2];
				this.close2();
			},
			close2: function() {
				this.show2 = false;
			},
			//构建地区信息
			getArea:function(){
				let area = {
					province:this.province,
				    city:this.city,
				    county:this.area,
					};
				return area;
			}
		},
		
	}
</script>
<style>
	page {
		background-color: #F6F7F8;
		background-image: url(../../static/img/common/bj.png);
	}

	.help-body {
		width: 680rpx;
		left: 35rpx;
		top: 250rpx;
		position: absolute;
		z-index: 1;
	}

	.grace-grids {
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 10rpx 0;
	}

	.grace-grids-items {
		width: 160rpx;
	}

	.login-sendmsg-btn {
		height: 60rpx;
		width: 200rpx;
		flex-shrink: 0;
		margin-left: 30rpx;
		text-align: center;
		background-color: #ffffff;
		line-height: 60rpx;
		font-size: 26rpx;
	}

	.grace-pnper {
		width: 168rpx;
		flex-shrink: 0;
	}

	.grace-form-label {
		width: 168rpx;
	}

	.grace-form-input {
		text-align: left;
	}

	.grace-form-item {
		padding: 10rpx 0;
	}

	.grace-login-three-items {
		display: block;
		width: 88rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 60rpx;
		color: #3688FF;
		text-align: center;
		margin: 10rpx;
	}
</style>
